import { toRefs } from "@vueuse/shared"
import { computed } from "vue"
import { useEventListener } from "@vueuse/core"

// 这里将添加JavaScript代码
function createcircle(event) {
    const circle = document.createElement('div');
    circle.classList.add('p-circle');
    document.body.appendChild(circle);

    // 设置泡泡位置
    circle.style.left = `${event.clientX}px`;
    circle.style.top = `${event.clientY}px`;

    // 设置泡泡大小和其他样式属性
    const size = Math.floor(Math.random() * 10 + 20); // 随机生成5到15之间的大小
    circle.style.width = `${size}px`;
    circle.style.height = `${size}px`;
    // circle.style.boxShadow = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
    circle.style.boxShadow = ` 0px 0px 8px 0px hsl(${Math.random() * 360}, 90%, 70%) inset`

    // 设置泡泡的运动轨迹
    const destinationX = event.clientX + (Math.random() - 0.5) * 2 * 75;
    const destinationY = event.clientY + (Math.random() - 0.5) * 2 * 75;
    const animation = circle.animate([
        {
            transform: `translate(0, 0)`,
            opacity: 1
        },
        {
            transform: `translate(${destinationX - event.clientX}px, ${destinationY - event.clientY}px)`,
            opacity: 1
        }
    ], {
        duration: Math.random() * 1000 + 500, // 随机动画持续时间
        easing: 'ease-out'
    });

    // 动画完成后移除泡泡
    animation.onfinish = () => {
        circle.remove();
    };
}

const useMouseType = (config) => {
    const { showMouse, showPaoPao } = toRefs(computed(config))

    let stopPaoPao = () => void 0

    watch(showMouse, (show) => {
        show ? document.documentElement.classList.add("customize-cursor") : document.documentElement.classList.remove("customize-cursor")
    }, { immediate: true })

    watch(showPaoPao, show => {
        if (show) {
            stopPaoPao = useEventListener('mousemove', (e) => {
                window.requestAnimationFrame(function () {
                    createcircle(e)
                })
            })
        } else {
            stopPaoPao()
        }
    }, { immediate: true })
}

export default useMouseType